
<!-- 粉丝眼中的回收平台-->

<script setup>
import HomePanel from "@/views/mainPage/home/components/HomePanel.vue";
import {getFanStore} from "@/stores/getFanStore.js";

const fanStore = getFanStore();

</script>

<template>
<div>
  <HomePanel title="粉丝眼中的YY球鞋回收" sub-title="回收宝4年，900万+用户选择了YY球鞋回收，850万用户好评">
    <div class="demo-image">
      <el-scrollbar>
        <div class="scrollbar-flex-content">
          <div v-for="fanList in fanStore.fanList" :key="fanList.id" class="block" >
            <span class="demonstration">{{ fanList.user }}</span>
            <el-avatar :size="100">
              <el-image style="width: 100px; height: 100px" :src="`./src/assets/images/${fanList.image}`" lazy :fit="fanList" />
            </el-avatar>

            <span class="comment">{{ fanList.comment }}</span>
          </div>
        </div>
      </el-scrollbar>

    </div>
  </HomePanel>
</div>
</template>



<style scoped>

.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;

  flex-shrink: 0;

  align-items: center;
  justify-content: center;
  width: 25%;
  height: 100%;
  margin: 10px;

  border-radius: 4px;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.demo-image .comment {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.scrollbar-flex-content {
  display: flex;
  margin-right: 20px;
}

</style>